<template>
	<!-- 	search
	{{searchValue}} -->
	<view class="container">
		<view class="search-box">
			<view class="search_boxer">
				<input type="text" class="area_input" placeholder="请输入地区" v-model="searchValue.searchAreaValue" />
			</view>
			<view class="search_boxer">
				<input type="text" class="clan_input" placeholder="请输入姓氏" v-model="searchValue.searchClanValue" />
			</view>
			<button class="search_btn" @click="searchClanFamily()">查找</button>
		</view>
		<view class="outcome" v-if="outChoice">
			<view class="outcomeCard" v-for="(k,i) in outChoice" :key='k.id' @click="turnToClan(k.id)">
				<view>{{k.name}}</view>
				<view>{{k.place}}</view>
				<view>{{k.describe}}</view>
			</view>
			{{total}}
			<view class="pageCase" v-if="total != 0">
				<uni-pagination :total="total*2" v-model="currentPage" :page-size="pageSize" title="标题文字"
					@change="pageChange" />
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		useSearchStore
	} from '@/store/index.js'
	import {
		useClanTreeStore
	} from '@/store/index.js'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		getclanbyplace
	} from '@/apis/search.js'

	const useSearch = useSearchStore();
	const searchValue = ref({
		searchAreaValue: '',
		searchClanValue: '',
	})
	//一面显示多少个数据，加入不设置则为10
	const pageSize = 4;
	const current = ref(0)
	const currentPage = ref(0)
	const total = ref(0);
	const outChoice = ref([])
	const searchClanFamily = () => {
		outChoice.value = null;
		total.value = 0;
		currentPage.value = 1;
		getclanbyplace({
			'page': currentPage.value,
			'size': pageSize,
			"name": searchValue.value.searchClanValue,
			"place": searchValue.value.searchAreaValue
		}).then(res => {
			//家族数组
			if (res.data) {
				console.log(res.data, 'ssss')
				outChoice.value = res.data.list
				total.value = res.data.total
			} else {
				uni.showToast({
					icon: 'none',
					duration: 22000,
					title: '族谱不存在'
				});
			}

		})
	}

	const pageChange = () => {
		getclanbyplace({
			'page': currentPage.value,
			'size': pageSize,
			"name": searchValue.value.searchClanValue,
			"place": searchValue.value.searchAreaValue
		}).then(res => {
			//家族数组
			outChoice.value = res.data.list;
			console.log(outChoice.value)
			//总个数

			total.value = res.data.total
			console.log(total.value)
		})
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 300
		});
	}
	import {
		useClanStore
	} from '@/store/modules/clan.js'
	import clan from '@/apis/clan.js'

	const useTreeStore = useClanTreeStore()
	const useClan = useClanStore();

	const turnToClan = (id) => {
		console.log(id)
		//标记web-view需要变化
		useTreeStore.clanTreeChange = true
		useClan.clanId = id;
		useTreeStore.clanTreeid = id
		clan.getClanMsg(useClan.clanId).then(res => {
			useClan.clanMsg = res.data
			console.log(useClan.clanMsg, "searchuseClan.clanMsg =")
			clan.getClanItr(useClan.clanId).then(res => {
				console.log(res.data)
				useClan.clanItr = res.data
				uni.switchTab({
					url: '../clan/clan'
				})
			})
		})

	}
</script>

<!-- 设置页面颜色 -->
<style>
	page {
		background-color: #f7c9af;
	}

	.current-index-text {
		color: darkred !important;
	}
</style>

<style lang="less" scoped>
	.container {
		width: 100vw;
		display: inline-box;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;


		.search-box {

			gap: 5rpx;
			width: 100vw;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			border-bottom-left-radius: 14rpx;
			border-bottom-right-radius: 14rpx;
			padding-top: 20rpx;
			padding-bottom: 20rpx;
			box-shadow: 3px 3px 14px rgba(0, 0, 0, 0.3);

			.title {
				font-size: 50rpx;
				font-weight: 500;
				color: white;
				justify-items: center;
				text-align: center;
				padding-bottom: 20rpx;
			}

			.search_btn {
				margin-top: 30rpx;
				color: white;
				background-color: darkred;
				width: 50%;
			}


			.search_boxer {
				background-color: white;
				display: flex;
				height: 80rpx;
				width: 640rpx;
				border-radius: 14rpx;
				display: flex;
				align-items: center;
				border: 4rpx black solid;



				.area_input {
					padding-left: 4%;
					width: 96%;
				}

				.clan_input {
					padding-left: 4%;
					width: 96%;
				}

				.icon {
					padding-left: 30rpx;
					padding-right: 30rpx;
				}

				.search_input {
					padding-left: 20rpx;
					z-index: 100;
					width: 500rpx;
					height: 80rpx;
					font-size: 30rpx;
				}


			}
		}

		.outcome {
			margin-top: 20rpx;
			width: 100%;
			display: flex;
			align-items: center;
			flex-direction: column;
			overflow: scroll;

			.outcomeCard {
				height: 300rpx;
				width: 90%;
				margin-top: 30rpx;
				border: 2rpx black solid;
			}

			.pageCase {
				margin-top: 40rpx;
				height: 100rpx;
				width: 100vw;


			}
		}
	}
</style>